import React from "react";
import BaseScreen from "./BaseScreen";
import ProgressView from "../view/ProgressView";
import styles from "../css/rank.module.css";
import Config from "../Config";
import { bonusRankings } from '../service/MineService'
import { getTOKEN, getInfo } from "../utils/StorageUtil";
import { NORANK } from './components/Default'
import Scroll from './components/Bscroll/index'
import { RankingImg, AVATAR } from '../const/imgs'
class RankScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 20;
    this.state = {
      selectedIndex: 0,
      rankList: [],
      isShowMore: false,
      myRank: {},
      loading: false
    };
  }
  navigate = (e) => {
    this.setState({
      selectedIndex: e
    })
  }
  componentDidMount() {
    this.setTitle("排行榜");
    this.CURRENT_PAGE = 1
    this.getRankList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getRankList = (params) => {
    this.setState({ loading: true })

    bonusRankings({
      token: getTOKEN(),
      ...params
    })
      .then(
        res => {
          this.setState({ loading: false })
          const rankList = params.isReFresh ? [] : this.state.rankList
          if (res.error_code === 0) {
            const RANKLIST = [...rankList, ...res.data]
            const UserInfo = getInfo('UserInfo')
            let myRank = {}
            for (let i = 0; i < RANKLIST.length; i++) {
              if (RANKLIST[i].phone === UserInfo.phone) {
                myRank = RANKLIST[i]
                myRank.mingci = i + 1
              }
            }

            this.setState({
              rankList: RANKLIST,
              myRank: myRank,
              isShowMore: res.data.length === this.PER_PAGE
            })
            this.CURRENT_PAGE++;

          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp = () => {
    const that = this
    this.getRankList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const { myRank, rankList, isShowMore, loading } = this.state
    return (
      <div className={styles["home"]}>
        <MyRanking
          myRank={myRank}
        />
        <div className={styles["wrapper"]}>
          <Scroll
            ref='scroll'
            click={true}
            bounce={true}
            pullUpLoad={true}
            pullUpLoadMoreData={this.pullingUp}
            isPullUpTipHide={true}
            isShowMore={isShowMore}
          >
            <div className={styles["ranking_container"]}>
              {rankList.length === 0 && <NORANK des='没有排行' />}
              {rankList.map((item, index) => {
                return (
                  <Ranking key={index} index={index} name={item.name} amount={item.acc_repayment_amount} sex={item.sex} />
                )
              })}
            </div>
          </Scroll>
        </div>
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />
      </div>
    );
  }
}

const MyRanking = ({ myRank: { mingci, amount, name, sex } }) => {
  return (
    <div className={styles["my_ranking"]} style={{ background: Config.BaseColor }}>
      <div>
        <div className={styles["info_wrap"]}>
          <div>
            <div className={styles["my_avatar"]}>
              <img src={parseInt(sex) === 1 ? AVATAR.male : AVATAR.famale} alt='' />
            </div>
          </div>
          <div className={styles["my_info"]}>
            <div className={styles["my_name"]}>
              {name}
            </div>
            <div className={styles["my_rank"]}>
              排名：第{mingci}名
            </div>
          </div>
        </div>
      </div>
      <div>
        <div className={styles["my_bonus"]}>
          {amount}
        </div>
      </div>
    </div>
  )
}

const Ranking = ({ index, amount, name, sex }) => {
  return (
    <div className={styles["ranking"]}>
      <div className={styles["ranking_bottom"]}>
        <div>
        <div className={styles["info_wrap"]}>
          <div className={styles["rank"]}>
            {index < 3 &&
              <img className={styles['rank_icon']} src={RankingImg[index + 1]} />
            }
            {index >= 3 && index + 1}
          </div>
          <div className={styles["avatar"]}>
            <img src={parseInt(sex) === 1 ? AVATAR.male : AVATAR.famale} alt='' />
          </div>
          <div className={styles["name"]}>
            {name}
          </div>
        </div>
    </div>

      <div className={styles["bonus"]}
        style={{ color: index < 3 ? "#f63435" : "#24272a" }}
      >
        {amount}
      </div>
    </div>
    </div>
  )
}

const rankIcon = [
  {
    imgurl: ''
  },
  {
    imgurl: ''
  }, {
    imgurl: ''
  }
]

export default RankScreen;
